<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@ page language="java" import="com.mall.model.*"%>
<!DOCTYPE html>
<html manifest="${pageContext.request.contextPath}/appcache/comm.appcache">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<c:if test="${comm!=null }">
		<title>${comm.title }</title>
	</c:if>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/bower/css/bootstrap.min.css" />
	 	<link href="${pageContext.request.contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
	<link rel="stylesheet" href="${pageContext.request.contextPath}/bower/src/css/mag.css" />
	<style type="text/css">
	</style>
</head>
<body style="width: 1366px">
	<c:if test="${user==null }">
	<div style="background: #F5F5F5;height:40px;" id="topdiv">
		<div style="margin-top:10px;margin-left:40px;">
			您好!请<a href="#" onclick="return logindiv()">登录!</a>
		</div>
		<div style="margin-left:20px;">
			马上<a href="${pageContext.request.contextPath}/register.jsp" target="_blank">注册!</a>
		</div>
		<div style="margin-left:700px;">
			<a href="${pageContext.request.contextPath}">商城首页 <span class="fa fa-home" style="color:#FF7F00">
			</span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a id="carta" href="${pageContext.request.contextPath}/CartController/listCartByUser.action">购物车 <span class="fa fa-shopping-cart"
				style="color:#FF7F00"></span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a id="carta" href="${pageContext.request.contextPath}/user/center.action">个人中心 <span class="fa fa-user-circle-o"
				style="color:#FF7F00"></span>
			</a>
		</div>
	</div>
	</c:if>
	<c:if test="${user!=null }">
	<div style="background: #F5F5F5;height:40px;" id="topdiv">
		<div style="margin-top:10px;margin-left:40px;">
			您好!${user.name}
		</div>
		<div style="margin-left:20px;">
			<a href="#" onclick="return outlogin()">退出登录</a>
		</div>
		<div style="margin-left:700px;">
			<a href="${pageContext.request.contextPath}">商城首页 <span class="fa fa-home" style="color:#FF7F00">
			</span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a id="carta" href="${pageContext.request.contextPath}/CartController/listCartByUser.action">购物车 
			<span class="fa fa-shopping-cart"style="color:#FF7F00"></span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a  id="carta" href="${pageContext.request.contextPath}/user/center.action">个人中心 <span class="fa fa-user-circle-o"
				style="color:#FF7F00"></span>
			</a>
		</div>
	</div>
	</c:if>
	<div id="toplogo" style="border-bottom:2px solid #FF3030;height:102px;">
		<div style="margin-left: 200px;">
			<a href="${pageContext.request.contextPath}">
				<img src="${pageContext.request.contextPath}/img/juninglogo.jpg"
				width="100px" height="100px" />
			</a>
		</div>
		<div style="background:#FF3030 ;margin:36px 0 0 400px;">
			<form action="${pageContext.request.contextPath}/commodity/search.action">
				<input name="keyword" type="text"
					style="border:1px solid #FF3030;height:30px;width: 300px;color:16px">
					<input type="hidden" value="sold desc,price asc" name="sort" />
				<input type="submit" value="搜索商品"
					style="border:none;background: none;color:#fff">
			</form>
		</div>
	</div>
	<div id="title" >
		<div style="width:400px;height:400px;position:relative;" >
			<!-- 放大 -->
			<div mag-thumb="outer" id="succes">
                  <img id="min" src="${pageContext.request.contextPath}/file/detailed/${comm.img1 }"  width="400px" height="400px" style="border:1px solid #FF7F00"/>
                </div>
                <div class="filler" style="width:400x;height:400px;"></div>
                <div mag-zoom="outer"  id="big">
                  <img src="${pageContext.request.contextPath}/file/detailed/${comm.img1 }" id="bigimg" />
                </div>
			<!-- 放大结束 -->
			<div id="minimg">
			<img id="minimg1"class="minimg"src="${pageContext.request.contextPath}/file/detailed/${comm.img1 }" width="80px" height="80px">
			<c:if test="${comm.img2!=''&&comm.img2!=null}">
			<img  id="minimg2" class="minimg" src="${pageContext.request.contextPath}/file/detailed/${comm.img2 }" width="80px" height="80px">
			</c:if>
			<c:if test="${comm.img3!=''&&comm.img3!=null}">
			<img  id="minimg3" class="minimg" src="${pageContext.request.contextPath}/file/detailed/${comm.img3 }" width="80px" height="80px">
			</c:if>
			<c:if test="${comm.img4!=''&&comm.img4!=null}">
			<img  id="minimg4" class="minimg" src="${pageContext.request.contextPath}/file/detailed/${comm.img4 }" width="80px" height="80px">
			</c:if>
			</div>
			<div id="titleRight">
			<h4 style="color:#FF8C00;font-weight:600">&nbsp;&nbsp;
			${comm.title }
			</h4>
			<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:本商城所有购买的商品,均为免费送货上门,免费安装.请选好再下单以免带来不必要的麻烦</span>
			<br>
				<div style="background: #FFE4E1;width: 500px;height:80px;margin:5px 0 0 20px;padding-top:18px;">
						<div>
						<span>价格:</span>
					<span class=" fa fa-yen fa-2x" style="color:#FF7F00;margin-top: 5px "></span>
					<span  style="color:#FF7F00;font-size: 23px " id="price">${comm.price }</span>元
						</div>
						<div style="margin:9px 0 0 100px">
						<span>已售出</span>
						<span style="color:#FF7F00;">${comm.sold }件</span>
						</div>
				</div>
				<div style="border-top:1px dashed;width: 500px;margin:40px 0 0 20px">
					<div style="min-width:400px">
					<div style="margin:40px 0 0 20px;">颜色分类:</div>
					<c:forEach items="${classlist}" var="c" varStatus="dex">
  							<div class="colortype"  id="colortype${dex.count}">
								<span id="cname">${c.name }</span>
								<input type="hidden" value="${c.price }" id="cprice">
								<input type="hidden" value="${c.id }" id="cid">
								<input type="hidden" value="${c.stock }" id="cstock">
							</div>
					</c:forEach>
					</div>
					<div style="margin-top: 20px;">
						<div style="margin:40px 0 0 20px;">购买数量&nbsp;</div>
						<div  class="numplus" id="reduce">
						<span class="fa fa-chevron-left"></span>
						</div>
						<div style="margin:40px 0 0 20px;">
						 <input readonly="readonly" id="num" type="text" value="1" style="width:23px;height:20px;color:#FF0000">
						 </div>
						<div class="numplus"  id="plus">
							<span class="fa fa-chevron-right"></span>
						</div>
						<div style="margin:40px 0 0 40px;">
						<span>库存</span>
						<span id="stock" style="color:#FF0000" >${comm.stock }</span>件
						</div>
					</div>
				</div>
				<div style="position: relative;">
					<div style="display:none;position:absolute;left:170px;top:20px;z-index: 999 " id="classerror">
						<span style="color:red">请先选择颜色分类!</span>
					</div>
					<button id="purchase" class="btns" style="margin-left:20px">立即购买</button>
					<button  id="cart" class="btns" style="margin-left:40px">加购物车</button>
					<input type="hidden" id="user" value="${user.id}">
					</div>
			</div>
		</div>
		</div>
		<div id="content">
			<div style="background:#EEDFCC;width:100%;height:40px; ">
				<div id="data">图文详情</div>
				<div id="parameter">详细参数</div>
			</div>
				<div id="contentdiv">
					<%CommDetailed cd=(CommDetailed)request.getAttribute("commD");
						String content=null;
						if(cd!=null){
						content=cd.getContent();
						}
					 %>
					 <%=content%>
				</div>
				<div id="parameterdiv" style="display: none;">
					<div style="font-size: 12px;font-weight:580;border:1px solid #D9D9D9">
						&nbsp;&nbsp;&nbsp;&nbsp;
					${comm.parameter}
					<br>
					<br>
					</div>
					<div style="max-width: 1000px;display: block;margin: auto;">
					${commD.content}
					</div>
				</div>
		</div>
		<div id="login">
			<span style="margin:10px 0 0 163px">您还没有登录</span>
			<span class="fa fa-close fa-2x" 
			style="position: absolute;left:380px" id="closeLogin" ></span>
			<div style="margin: 20px 0 0 90px;">
				<form id="loginform">
				<span>账号</span>
				<input type="text" name="username" style="margin-left:10px">
				<br><br>
				<span>密码</span>
				<input type="password" name="password" style="margin-left:10px">
				<br><br>
				<input id="submitform" type="submit" value="登录" style="width: 100px;
				height: 28px;background: #FFD700;color:#fff;
				margin-left: 67px;">
				<br><br>
				<span style="margin-left: 50px">没有账号?</span>
				<a href="${pageContext.request.contextPath}/register.jsp" target="_blank" style="color:#E0FFFF">立即注册</a>
				<br><span id="error" style="color:red;margin-left: 50px"></span>
			</form>
			<form id="cartform">
			<input type="hidden" name="commname" value="${comm.title }">
			<input type="hidden" name="commid" value="${comm.id}">
			<input type="hidden" name="commnum" value="1" id="commnum">
			<input type="hidden" name="userid" value="${user.id }">
			<input type="hidden" name="price" value="${comm.price}" id="classprice" >
			<input type="hidden" name="img" value="${comm.titleimg }">
			<input type="hidden" name="classname" id="classname">
			<input type="hidden" name="classid" id="classid">
			<input type="hidden" name="stock" value="${comm.stock }" id="fstock">
			</form>
			<input type="hidden" value="${pageContext.request.contextPath}" id="path">
			</div>
		</div>
			<div style="width:1100%;height:150px;">
			<div style="margin:15px 0 0 540px;color:#595959;font-size:13px;font-weight:600;
			letter-spacing:3px">
			本站由DGW制作,版权归俊宁电器所属.
			</div>
			<div style="margin:15px 0 0 595px;color:#595959;font-size:13px;font-weight:600;
			letter-spacing:3px">
				蜀ICP备20170105号
			</div>
			<div style="margin:15px 0 0 576px;color:#595959;font-size:13px;font-weight:600;
			letter-spacing:3px">
			2017-7-1  ——  2017-9-21
			</div>
	</div>
	<script src="${pageContext.request.contextPath}/bower/js/jquery-1.11.0.min.js"></script>
	<script src="${pageContext.request.contextPath}/bower/js/jquery.bridget.js"></script>
	<script src="${pageContext.request.contextPath}/bower/js/PreventGhostClick.js"></script>
	<script src="${pageContext.request.contextPath}/bower/src/js/mag.js"></script>
	<script src="${pageContext.request.contextPath}/bower/src/js/mag-jquery.js"></script>
	<script src="${pageContext.request.contextPath}/bower/src/js/mag-control.js"></script>
	<script src="${pageContext.request.contextPath}/bower/js/index.js"></script>
</body>
<script type="text/javascript">
/* 异步退出登录 */
function outlogin(){
	var path=$("#path").val();
	$.get(path+"/user/outLogin.action",{},function(){
		location.reload();
	})
	return false;
}
function logindiv(){
$("#login").css("display","block");
return false;
}
</script>
<style>
#closeLogin:hover{
cursor: pointer;
}
#contentdiv img{
	max-width: 1000px;
	display: block;
	margin: auto;
}
#contentdiv{
	padding-top: 60px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</html>